import React, { Component } from 'react';
import { Form, Icon, Button, Input } from 'antd';

const FormItem = Form.Item;

class LoginForm extends Component {
  state = {}

  login = (e) => {
    const { form, onLogin } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        onLogin && onLogin(values)
      }
    }); 
    e && e.preventDefault();
  }

  checkUserName = (rule, value, cb) => {
    if (!value) {
      cb('请输入用户名！');
    } else {
      cb();
    }
  }

  checkPassWord = (rule, value, cb) => {
    if (!value) {
      cb('请输入密码！');
    } else {
      cb();
    }
  }

  render() {
    const { errorMsg, loading, form } = this.props;
    const { getFieldDecorator } = form;
    const colorStyle = { color: 'rgba(0,0,0,.25)' };
    const FormItemStyle = {  margin: 0 };
    return (
      <Form className="login-form">
        {errorMsg? (
          <FormItem style={FormItemStyle}>
            {getFieldDecorator('errMessage')(
              <span className='errMessage'>{errorMsg}</span>
            )}
          </FormItem>
        ) : null}
        <FormItem>
          {getFieldDecorator('username', {
            initialValue: '',
            rules: [{validator: this.checkUserName}]
          })(
            <Input prefix={<Icon type="user" style={colorStyle} />} placeholder="用户名"/>
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            initialValue: '',
            rules: [{validator: this.checkPassWord}]
          })(
            <Input prefix={<Icon type="lock" style={colorStyle}  />}type="password" placeholder="密码"/>
          )}
        </FormItem>
        <FormItem>
          <Button loading={loading} type="primary" onClick={this.login} className="login-form-button">
            {!loading ? '登录' : '登录中'}
          </Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create({})(LoginForm);